<template>
 <StackLayout class="cell">
  <GridLayout class="top" height="50" columns="auto, *, auto">
    <label :class="isBuyOrSell? 'buy' : 'sell'" col="0" :text="isBuyOrSell? 'Buy' : 'Sell'" verticalAlignment="center"/>
    <label col="1" class="cell-content" marginLeft="20" :text="`${order.baseCoin}/${order.quoteCoin}`" verticalAlignment="center"/>
    <Button class="status" col="2" :text="status" verticalAlignment="center"/>
  </GridLayout>
  <GridLayout columns="2*, 2*, 2*" class="cell-bellow" rows="auto, *">
    <label class="label" col="0" row="0" text="Date"/>
    <label class="label" col="1" row="0" text="Price"/>
    <label class="label" col="2" row="0" text="Amount"/>
    <label class="cell-content" col="0" row="1" :text="timeStr"/>
    <label class="cell-content" col="1" row="1" :text="order.price"/>
    <label class="cell-content" col="2" row="1" :text="order.targetAmount" />
  </GridLayout>
  <GridLayout columns="*, *" class="cell-bellow" rows="auto, *">
    <label class="label" col="0" row="0" :text="`Executed Amount (${order.baseCoin})`"/>
    <label class="label" col="1" row="0" text="Average Price"/>
    <label class="cell-content" col="0" row="1" :text="order.baseExecuted"/>
    <label class="cell-content" col="1" row="1" :text="order.averagePrice"/>
  </GridLayout>
  <GridLayout columns="*, *" class="cell-bellow" rows="auto, *">
    <label class="label" col="0" row="0" :text="`Executed Amount (${order.quoteCoin})`"/>
    <label class="label" col="1" row="0" text="Fee"/>
    <label class="cell-content" col="0" row="1" :text="order.quoteExecuted"/>
    <label class="cell-content" col="1" row="1" :text="order.fee"/>
  </GridLayout>
</StackLayout>
</template>
<script>
import {dataBus} from '~/business/DataBus'
require('~/utils/dateFormat')

export default {
  props: ['order'],
  computed: {
    timeStr() {
      let date = new Date(this.order.timestamp)
      return date.format('HH:MM mm/dd')
    },
    isBuyOrSell() {
      return this.order.type == 'buy' ? true : false
    },
    status() {
      if (this.order.status == 'canceled') {
        return 'Cancelled'
      } else {
        return 'Completed'
      }
    }
  }
}
</script>

<style scoped>
  .cell {
    padding-left: 12;
    padding-right: 12;
    border-bottom-width: 1;
    border-bottom-color: #274867;
  }
  .sell {
    color: #DC3E32;
    font-size: 14;
  }
  .buy {
    color: #1AC86A;
    font-size: 14;
  }
  .status {
    color: #01ECF4;
    font-size: 14;
    background-color: transparent;
  }
  .label {
    color: #6292BE;
    font-size: 12;
  }
  .cell-content {
    color: white;
    font-size: 14;
  }
  .cell-bellow {
    height: 45;
    margin-top: 10;
    margin-bottom: 10;
  }
</style>
